<!--
 * @Description: Description
 * @Author: zhangkexing
 * @Date: 2024-07-24 16:11:09
 * @LastEditors: zhangkexing
 * @LastEditTime: 2024-07-19 13:22:56
-->
<template>
  <div class="page">
    <div :class="['topbox','dayTime' + dayTime]">
      <div class="name-box">
        <img class="avatar" src="@/assets/image/home/avatar.png">
        <div class="name-box-center-box">
          <div class="hello">上午好，刘牛牛</div>
          <div class="name-box-detail">
            <div class="detail-item">
              <img v-if="dayTime" src="@/assets/image/home/ling-b.svg">
              <img v-else src="@/assets/image/home/ling.svg">
              <span>续期服务专员</span>
            </div>
            <div class="detail-item" style="margin-left: 10px;">
              <img v-if="dayTime" src="@/assets/image/home/build-b.svg">
              <img v-else src="@/assets/image/home/build.svg">
              <span>上海/上海安澜路</span>
            </div>
          </div>
        </div>
        <div :class="['qin', 'qin' + dayTime]">外勤</div>
      </div>

      <div class="rate-box">
        <div class="rate-item">
          <div class="rate-num">12.98%</div>
          <div class="rate-text">本月达成率</div>
        </div>
        <div class="rate-line"></div>
        <div class="rate-item">
          <div class="rate-num">12.98%</div>
          <div class="rate-text">本月达成率</div>
        </div>
        <div class="rate-line"></div>
        <div class="rate-item">
          <div class="rate-num">12.98%</div>
          <div class="rate-text">本月达成率</div>
        </div>
      </div>
    </div>
    <van-grid :border="false" class="grid-box">
      <van-grid-item v-for="item in userMenu" @click="menuCli(item)" :key="item.text">
        <img :src="item.src">
        <span class="grid-item-text">{{item.text}}</span>
      </van-grid-item>
    </van-grid>

    <van-tabs v-model:active="active" @click-tab="onClickTab" class="tabs-home" style="margin-top: 10px;">
      <van-tab v-for="item in userTabs" :title="`${item.title}(${item.n})`" :key="item.title">
        <component :is="item.component || currentComponent" :item="item" />
      </van-tab>
    </van-tabs>

  </div>

</template>

<script setup name="Home">
import {
  getCurrentInstance,
  ref,
  reactive,
  toRefs,
  onMounted,
  nextTick,
} from "vue";
const { proxy } = getCurrentInstance();

import { defineAsyncComponent } from "vue";
// 使用defineAsyncComponent定义异步组件
const RenewalFee = defineAsyncComponent(() =>
  import("./components/RenewalFee.vue")
);
const PersonnelManagement = defineAsyncComponent(() =>
  import("./components/PersonnelManagement.vue")
);
const currentComponent = ref(RenewalFee); // 动态绑定组件

const active = ref(0);

const onClickTab = (tab) => {
  console.log(tab);
};

const tabsItems = [
  {
    title: "续期收费",
    n: 4,
    component: ref(PersonnelManagement),
    roles: [],
    key: "",
  },
  {
    title: "转续保",
    n: 0,
    component: ref(RenewalFee),
    roles: [],
    key: "",
  },
  {
    title: "生日提醒",
    n: 0,
    component: "",
    roles: [],
    key: "",
  },
  {
    title: "主动服务",
    n: 0,
    component: "",
    roles: [],
    key: "",
  },
  {
    title: "人员管理",
    n: 0,
    component: "",
    roles: [],
    key: "",
  },
  {
    title: "招募管理",
    n: 0,
    component: "",
    roles: [],
    key: "",
  },
];
const userTabs = reactive([]);
tabsItems.forEach((item) => {
  if (
    item.roles.length == 0 ||
    item.roles.includes(proxy.$store.state.user.role)
  ) {
    userTabs.push(reactive(item));
  }
});

const menuItems = [
  {
    text: "任务中心",
    name: "renwu",
    roles: [],
  },
  {
    text: "保单查询",
    name: "baodan",
    roles: [],
  },
  {
    text: "报表管理",
    name: "baobiao",
    roles: [],
  },
  {
    text: "用户管理",
    name: "yonghu",
    roles: [],
  },
  {
    text: "二维码",
    name: "erweima",
    roles: [],
  },
  {
    text: "招募管理",
    name: "zhaomu",
    roles: [],
  },
  {
    text: "人员管理",
    name: "renyuan",
    roles: [],
  },
  {
    text: "考核查询",
    name: "kaohe",
    roles: [],
  },
  {
    text: "薪资查询",
    name: "xinzi",
    roles: [],
  },
];
function loadImage(obj) {
  import(`@/assets/image/home/${obj.name}.svg`).then((module) => {
    obj.src = module.default;
  });
}
const menuCli = (item) => {
  console.log(item);
};
const userMenu = reactive([]);
menuItems.forEach((item) => {
  if (
    item.roles.length == 0 ||
    item.roles.includes(proxy.$store.state.user.role)
  ) {
    loadImage(reactive(item));
    userMenu.push(item);
  }
});

const dayTime = ref(0);
function isDayTime() {
  const now = new Date();
  const hour = now.getHours() + 1;
  // 假设白天为6:00到18:00（18:00 PM）
  dayTime.value = hour >= 6 && hour < 18 ? 1 : 0;
  dayTime.value = 1;
}
isDayTime();
</script>

<style scoped lang="scss">
.page {
  position: relative;
  height: 100vh;
  background: #f2f5f7;
  .topbox {
    position: relative;
    width: 100%;
    height: 188px;
    background-image: url("@/assets/image/home/bg-n.png");
    background-repeat: no-repeat;
    background-size: cover;
    .name-box {
      position: relative;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      padding: 32px 10px 0;
      .avatar {
        width: 48px;
        height: 48px;
      }
      .name-box-center-box {
        margin-left: 15px;
        .hello {
          font-family: PingFang SC;
          font-size: 20px;
          font-weight: 500;
        }
        .name-box-detail {
          display: flex;
          font-size: 12px;
          margin-top: 5px;
          .detail-item {
            display: flex;
            align-items: center;
            img {
              margin-right: 4px;
            }
          }
        }
      }
      .qin {
        position: absolute;
        right: 10px;
        width: 56px;
        height: 24px;
        border-radius: 756px;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
      }
    }
    .rate-box {
      position: absolute;
      bottom: 0;
      width: calc(100% - 20px);
      left: 10px;
      height: 76px;
      border-radius: 8px 8px 0px 0px;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rate-item {
        width: 33%;
        text-align: center;
        .rate-num {
          font-size: 20px;
          font-weight: 600;
          color: #162032;
        }
        .rate-text {
          margin-top: 5px;
          font-size: 12px;
          color: #666666;
        }
      }
      .rate-line {
        width: 1px;
        height: 40px;
        transform: rotate(180deg);
        border-radius: 4px;
        background: #e5e5e5;
      }
    }
  }
  .dayTime0 {
    background-image: url("@/assets/image/home/bg-n.png");
    color: #162032;
    color: #fff;
    .qin {
      border: 1px solid #edf0f6;
    }
  }
  .dayTime1 {
    background-image: url("@/assets/image/home/bg.png");
    color: #000;
    .qin {
      background: #2e7df3;
      color: #fff;
    }
  }
  .grid-box {
    background: #fff;
    box-shadow: 0px -2px 4px 0px rgba(22, 80, 182, 0.6);
  }
}
.grid-item-text {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  color: #162032;
  margin-top: 10px;
}
.tabs-home {
  :deep(.van-tabs__wrap::after) {
    content: "";
    position: absolute;
    top: 41px;
    left: 0;
    z-index: 0;
    background: #e5e5e5;
    width: 100%;
    height: 2px;
  }
}
</style>